<template>
	<view class="body">
		<view class="section" :class="{mt20: index !== 0}" v-for="(item,index) in teamData"
			:key="index">
			<view class="job">
				<text>设计师</text>
			</view>
			<view class="staff_list">
				<view class="item" :class="{mt40: idx > 4}" v-for="(val,idx) in item"
					:key="idx">
					<view class="img_wrap">
						<image></image>
					</view>
					<text class="name">XXX</text>
					<text class="work_exp">10年经验</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			teamData: [
				['', '', '', '', '', '', ''],
				['', '', '', '']
			]
		}
	}
}
</script>

<style scoped lang="scss">
page,
body {
    background-color: #f5f5f5 !important;
}
.mt40 {
    margin-top: 40px;
}
.body {
    padding-top: 20px;
    background-color: #f5f5f5;
}
.section {
    background-color: #fff;
    padding: 40px 15px 30px 15px;
    &.mt20 {
        margin-top: 20px;
    }
    .job {
        padding-left: 25px;
        text {
            line-height: 1;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            color: #333333;
        }
    }
    .staff_list {
        display: flex;
        flex-wrap: wrap;
        margin-top: 29px;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 0 0 144px;
            .img_wrap {
                background-color: skyblue;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            text {
                line-height: 1;
            }
            .name {
                font-size: 26px;
                font-weight: normal;
                font-stretch: normal;
                color: #333333;
                margin-top: 18px;
            }
            .work_exp {
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                color: #999999;
                margin-top: 10px;
            }
        }
    }
}
</style>
